<template>
	<view class="content">
		<!-- 上方区域 -->
		<view class="topBox">
			<!-- 头部区域 -->
			<view class="setbox">
				<view class="set-left">
					<uni-icons type="calendar" color="#fff" size="30"></uni-icons>
					<view class="text">签到</view>
				</view>
				<view class="set-right">
					<uni-icons type="gear" color="#fff" size="30"></uni-icons>
					<uni-icons type="chat" color="#fff" size="30"></uni-icons>
				</view>
			</view>
			<!-- 头像、登录区域 -->
			<view class="users" @click="setFun">
				<view class="u-top">
					<template v-if="!userInfo.nickName">
						<image src="/static/tt.jpg" mode="aspectFill"></image>
						<view class="titl">
							注册 / 登录
						</view>
					</template>
					<template v-else>
						<image :src="userInfo.avatarUrl" mode="aspectFill"></image>
						<view class="titl">
							{{userInfo.nickName}}
						</view>
					</template>
				</view>
				<view class="u-bottom">
					<view class="u-item">
						<view class="num">12</view>
						<view class="tit">点赞</view>
					</view>
					<view class="u-item">
						<view class="num">12</view>
						<view class="tit">喜欢</view>
					</view>
					<view class="u-item">
						<view class="num">12</view>
						<view class="tit">浏览</view>
					</view>
					<view class="u-item">
						<view class="num">12</view>
						<view class="tit">收藏</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 下方区域 -->
		<view class="listBox">
			<view class="lists">
				<uni-list>
					<uni-list-item  :show-extra-icon="true" :extra-icon="extraIcon1" show-arrow="true" title="个人信息" clickable ></uni-list-item>
					<uni-list-item  :show-extra-icon="true" :extra-icon="extraIcon2" show-arrow="true" title="我的购物车" clickable ></uni-list-item>
					<uni-list-item  :show-extra-icon="true" :extra-icon="extraIcon3" show-arrow="true" title="用户反馈" clickable ></uni-list-item>
					<uni-list-item  :show-extra-icon="true" :extra-icon="extraIcon4" show-arrow="true" title="我的邮件" clickable ></uni-list-item>
					<uni-list-item  :show-extra-icon="true" :extra-icon="extraIcon5" show-arrow="true" title="分享有礼" clickable ></uni-list-item>
				</uni-list>
			</view>
		</view>
		<!-- 下方弹出框 -->
		<u-popup :show="show" @close="close">
			<view class="popup">
				<view class="title">获取您的昵称、头像</view>
				<view class="flex">
					<view class="label">获取用户头像：</view>
					<button class="avatar-wrpper" open-type="chooseAvatar" @chooseAvatar="onChooseAvatar">
						<image :src="userInfo.avatarUrl"></image>
					</button>
				</view>
				<view class="flex">
					<view class="label">获取用户昵称：</view>
					<!-- nickname:昵称输入键盘 -->
					<input type="nickname" @input="changeName" />
				</view>
				<button size="default" type="primary" @click="userSubmit">确定</button>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {ref,reactive} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	import {login,getUserInfo} from '../../api/api.js'
	let userInfo = reactive({
		nickName: '',
		avatarUrl: '',
	})
	const extraIcon1 = reactive({
		color:'#666666',
		size:'22',
		type:'auth'
	})
		const extraIcon2 = reactive({
			color:'#666666',
			size:'22',
			type:'cart'
		})
		const extraIcon3 = reactive({
			color:'#666666',
			size:'22',
			type:'chatboxes'
		})
		const extraIcon4 = reactive({
			color:'#666666',
			size:'22',
			type:'email'
		})
		const extraIcon5 = reactive({
			color:'#666666',
			size:'22',
			type:'gift'
		})
	//控制弹出层的显示
	const show = ref(false)
	const close = () => {
		show.value = false
	}
	const onChooseAvatar = (e) => { //获取用户头像，可以从@chooseavatar回调中获取到头像信息
		userInfo.avatarUrl = e.detail.avatarUrl
	}
	const changeName = (e) => { //用户输入的方法
		userInfo.nickName = e.detail.value
	}
	// 点击确定按钮将弹框关闭，并把数据保存在storage中
	const userSubmit = ()=>{
		uni.setStorageSync('userInfo',JSON.stringify(userInfo))
		show.value =false
	}
	// 获取用户头像和昵称
		onLoad(async ()=>{
			//免登录
			if(uni.getStorageSync('token') && ! uni.getStorageSync('userInfo')){
				 const {nickName,avatarUrl} = await getUserInfo()
				 userInfo.avatarUrl = avatarUrl
				 userInfo.nickName = nickName
			}else if(uni.getStorageSync('token') && uni.getStorageSync('userInfo')){
				const {nickName,avatarUrl} = JSON.parse(uni.getStorageSync('userInfo'))
				userInfo.avatarUrl = avatarUrl
				userInfo.nickName = nickName
			}
		})
	//登录
	const setFun = () => {
			//uni.showModal用户提示框
			uni.showModal({
				title: '温馨提示',
				content: '亲，授权微信登录后才能正常使用小程序',
				success(res) {
					if (res.confirm) {
						uni.login({
							success: async (data) => {
								console.log(data)
								const {token} = await login(data.code)
								console.log(token, 'token')
								uni.setStorageSync('token', token)
								show.value = true
								//根据token获取用户数据
								const {avatarUrl,nickName} = await getUserInfo()
								userInfo.nickName = nickName,
								userInfo.avatarUrl = avatarUrl
								console.log(avatarUrl)
								console.log(nickName)
								
							}
						})
					}
				}
			})
		}
</script>
<style lang="scss" scoped>
	.content {
		height: 100vh;
		background-color: #f5f5f5;
		.topBox {
			width: 100%;
			box-sizing: border-box;
			position: relative;
			overflow: hidden;
			z-index: 1;
			padding: 40rpx 20rpx 40rpx;
		}
		.topBox::after {
			content: "";
			width: 140%;
			height: 200px;
			z-index: -1;
			position: absolute;
			top: 0;
			left: -20%;
			background-color: #00aaff; //
			border-radius: 0 0 50% 50%;
		}
		.setbox {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.set-left {
				width: 18%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.text {
				color: #fff;
				font-size: 30rpx;
			}
		}
		.users {
			margin-top: 35rpx;
			padding: 30rpx;
			height: 280rpx;
			box-sizing: border-box;
			border-radius: 16rpx;
			background-color: #fff;
			box-shadow: 1rpx 10rpx 20rpx #ececec;
			.u-top {
				display: flex;
				margin-bottom: 30rpx;
				justify-content: flex-start;
				align-items: center;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.titl {
					color: #333;
					font-weight: 800;
					font-size: 30rpx;
				}
			}
			.u-bottom {
				display: flex;
				justify-content: space-around;
				align-items: center;
				.u-item {
					text-align: center;
					.tit {
						color: #757575;
						font-size: 26rpx;
						margin-top: 12rpx;
					}
					.num {
						color: #000;
						font-size: 33rpx;
						font-weight: 700;
					}
				}
			}
		}
		.popup{
			padding: 20rpx;
			border-radius: 20rpx 20rpx 0 0;
			.title{
				font-size: 40rpx;
				margin-bottom: 20rpx;
				text-align: center;
			}
			.flex{
				padding: 25rpx 0;
				display: flex;
				justify-content: flex-start;
				align-content: center;
				border-bottom: 1px solid #f5f5f5;
			}
			image{
				width: 70rpx;
				height: 70rpx;
			}
			.avatar-wrpper{
				width: 70rpx;
				height: 70rpx;
				border: none;
				border-radius: 10rpx;
				margin-left: 20rpx;
			}
		}
		.listBox{
			height: 200rpx;
			padding: 20rpx;
			margin: -10rpx auto 0;
			box-sizing: border-box;
			border-radius: 12rpx;
		}
	}
</style>